<template>
  <a-flex class="header" :align="'center'" justify="space-between">
    <h1 class="title" @click="toTasks">如鱼下载</h1>
    <h2 style="margin: 0; color: white">{{ apis.version }}</h2>
  </a-flex>
</template>

<script setup lang="ts">
import { useApisStore } from "@/stores/apis";
import { App } from "ant-design-vue";
import { onMounted } from "vue";
import { useRouter } from "vue-router";

const { message } = App.useApp();
const router = useRouter();
const apis = useApisStore();

onMounted(async () => {
  try {
    await apis.getVersion();
    apis.startTaskNotify();
  } catch (error) {
    message.error(error as string);
  }
});

function toTasks() {
  router.push({ name: "tasks" });
}
</script>

<style scoped>
.header {
  height: 64px;
  background-color: #1677ff;
  padding: 0 16px;
}
.title {
  margin: 0;
  color: white;
  cursor: pointer;
}
</style>
